import { getCache, setCache } from '@/utils/session';
const state = {
  open: true,
  // 初始化一个变量 fixHeader值。fixHeader 的值取决于缓存中 'FIX_HEARDER' 这个键是否存在及其值。
  // 调用 getCache('FIX_HEARDER') 函数从缓存中获取 'TAG_SHOW' 键对应的值，
  // 返回null说明缓存没有，返回true，缓存有则直接使用缓存
  fixHeader: getCache('FIX_HEARDER') == null ? true : getCache('FIX_HEARDER'),
  tagShow: getCache('TAG_SHOW') == null ? true : getCache('TAG_SHOW'),
  settingVisible: false,
  layout: getCache('LAYOUT') || 'inline',
  theme: getCache('THEME') || 'mixins'
};

const mutations = {
  TOGGLE_OPEN(state) {
    state.open = !state.open;
  },
  CHANGE_SETTING(state, { key, value, cache }) {
    // eslint-disable-next-line
    if (state.hasOwnProperty(key)) {
      state[key] = value;
      setCache(cache, value);
    }
    // 可以这样写
    // if (key in state && state[key] !== undefined) {
    //   state[key] = value;
    //   setCache(key, value); // 正确地将 key 和 value 传给 setCache 函数
    // }
  },
  CHANGE_VISIBLE(state, bool) {
    state.settingVisible = bool;
  }
};

const actions = {
  changeSetting({ commit }, setting) {
    commit('CHANGE_SETTING', setting);
  },
  changeVisible({ commit }, bool) {
    commit('CHANGE_VISIBLE', bool);
  }
};

export default {
  // 用于指定当前模块是否应该被命名空间化
  // 当一个 Vuex 模块被声明为 namespaced: true 时，意味着它的所有 getter、mutation、action 都会被自动加上模块名称作为前缀
  // 在其他组件中调用这个模块的 action 或 mutation 时，需要加上模块名前缀：
  // this.$store.dispatch('user/fetchUser');
// this.$store.commit('user/SET_USER', newUser);
  namespaced: true,
  state,
  mutations,
  actions
};
